<template>
  <div class="hello">
    <div class="form-signin">
      <div id="stage">
        <div id="inner">
          <div id="cover">
            <div id="text">
              <span style="color: cyan">MIMI</span
              ><span style="color: white">POWERED</span>
            </div>
            <div id="detail"></div>
            <div id="handle"></div>
          </div>
          <canvas class="mb-4" id="live2d" width="800" height="800"></canvas>
        </div>
        <!-- <button class="btn btn-link" id="info">
          <i class="fa fa-lg fa-info"></i>
        </button> -->
        <button class="btn btn-link" id="refresh">
          <i class="fa fa-lg fa-refresh"></i>
        </button>
      </div>
      <h1 class="h3 mb-3 fw-normal">图床登陆平台</h1>
      <label class="sr-only">用户名</label>
      <input v-model="username"
        type="text"
        class="form-control"
        placeholder="用户名"
       @keyup.enter="submitClick"
      />
      <label  class="sr-only">密码</label>
      <input
	  	v-model="password"
        type="password"
        class="form-control"
        placeholder="密码"
		@keyup.enter="submitClick"
      />
      <div class="d-grid">
        <button class="btn btn-lg btn-primary" @click="submitClick" @keyup.enter="submitClick">登录</button>
      </div>
      <p class="mt-5 mb-3 text-muted">Copyleft &copy; Mimi 2021</p>
    </div>
  </div>
</template>

<script>
import store from '../store/index'
import "../assets/js/index"
import "../assets/js/live2d.min"
export default {
  name: "HelloWorld",
  data() {
    return {
		username:"",
		password:"",
      msg: "Welcome to Your Vue.js App",
    };
  },
//   watch: {
//   $route: {
//     handler: function(val, oldVal){
//       console.log(val);
//       console.log(oldVal);
//     },
//     // 深度观察监听
//     deep: true
//   }
// },
  mounted(){
    if (location.href.indexOf("#reloaded") == -1) {
        location.href = location.href + "#reloaded";
        location.reload();
    }
  },
 
  methods: {
	  submitClick(){
		console.log(this.username);
		console.log(this.password);
		this.$api.Getlogin({
			username:this.username,
			password:this.password
		}).then((res)=>{
			console.log(res);
			if(res.code==0){
				
				console.log(res.data);
				localStorage.setItem('token', res.data)
				sessionStorage.setItem('name', "已登陆")
				  this.$router.replace({ path: "/index" });
			}
			console.log(res.data);
		})
		//   this.$router.replace({ path: "/index" });
	  }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

html, body {
	height: 100%;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #f5f5f5;
}
.form-signin {
	width: 100%;
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}
.form-signin .checkbox {
	font-weight: 400;
}
.form-signin .form-control {
	position: relative;
	box-sizing: border-box;
	height: auto;
	padding: 10px;
	font-size: 16px;
}
.form-signin .form-control:focus {
	z-index: 2;
}
.form-signin input[type=text] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.form-signin input[type=password] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
#stage {
	position: relative;
}
#stage img {
	width: 100%;
	margin-bottom: 20px;
	border-radius: 20px;
}
#stage button {
	position: absolute;
	width: 2em;
	height: 2em;
	border-radius: 50%;
}
#inner {
	position: relative;
	background-color: #999;
	clip-path: circle(120px at center);
}
#cover {
	position: absolute;
	background-color: #CB3837;
	width: 100%;
	height: 100%;
	bottom: 10%;
	transition: all 1s;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, .1);
}
#text {
	position: absolute;
	bottom: 30%;
	font-size: 2em;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0.4;
	font-weight: bold;
}
#detail {
	position: absolute;
	background: rgba(255, 255, 255, .1);
	width: 100%;
	height: 10px;
	bottom: 0;
}
#handle {
	position: absolute;
	background: #ccc;
	bottom: -2px;
	box-shadow: 0 1px 0 1px rgba(0, 0, 0, .1);
	height: 8px;
	left: 50%;
	margin-left: -15px;
	width: 30px;
	cursor: pointer;
}
#info {
	left: 40px;
	bottom: 20px;
}
#refresh {
	right: 40px;
	bottom: 20px;
}
#live2d {
	cursor: grab;
	height: 300px;
	width: 300px;
}
#live2d:active {
	cursor: grabbing;
}
</style>
